<template>
    <el-container>
        <el-header>
            <div class="left-panel">
<#if genAdd>
                <el-button v-auth="'${module}:${business}:add'" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
</#if>
<#if genRemove>
                <el-button v-auth="'${module}:${business}:remove'" type="danger" plain icon="el-icon-delete" :disabled="selection.length===0" @click="batchDel">删除</el-button>
</#if>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
<#list fieldList as field>
    <#if field.pageTableQuery>
        <#if field.pageHtmlType == 'input-number'>
                    <el-input-number v-model="search.${field.javaField}" clearable></el-input-number>
        <#elseif field.pageHtmlType == 'text-area'>
                    <el-input v-model="search.${field.javaField}" type="textarea" placeholder="请输入${field.javaFieldComment}" clearable></el-input>
        <#elseif field.pageHtmlType == 'switch'>
                    <el-switch v-model="search.${field.javaField}" :active-value="true" :inactive-value="false"></el-switch>
        <#elseif field.pageHtmlType == 'date'>
                    <el-date-picker v-model="search.${field.javaField}" type="date" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
        <#elseif field.pageHtmlType == 'datetime'>
                    <el-date-picker v-model="search.${field.javaField}" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
        <#elseif field.pageHtmlType == 'time'>
                    <el-time-picker v-model="search.${field.javaField}" placeholder="请选择${field.javaFieldComment}" clearable></el-time-picker>
        <#elseif field.pageHtmlType == 'year'>
                    <el-date-picker v-model="search.${field.javaField}" type="year" placeholder="请选择${field.javaFieldComment}" clearable></el-date-picker>
        <#elseif field.pageHtmlType == 'select'>
                    <<#if field.pageDictType??>sc-select<#else>el-select</#if> v-model="search.${field.javaField}" <#if field.pageDictType??>dict="${field.pageDictType!}"</#if> placeholder="请选择${field.javaFieldComment}" style="width: 100%;" clearable></<#if field.pageDictType??>sc-select<#else>el-select</#if>>
        <#else>
                    <el-input v-model="search.${field.javaField}" placeholder="请输入${field.javaFieldComment}" clearable></el-input>
        </#if>
    </#if>
</#list>
                    <el-button v-auth="'${module}:${business}:<#if genPageTableType == '1'>page<#else>list</#if>'" type="primary" icon="el-icon-search" @click="upSearch">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="dataList" row-key="id" @selection-change="selectionChange" <#if genPageTableType == '2'>hidePagination</#if> stripe remoteSort remoteFilter>
                <#if genRemove>
                <el-table-column type="selection" width="50"></el-table-column>
                </#if>
                <el-table-column label="序号" type="index"></el-table-column>
                <#list fieldList as field>
                <#if field.pageTable>
                <el-table-column label="${field.javaFieldComment}" prop="${field.javaField}" align="center" width="150"></el-table-column>
                </#if>
                </#list>
                <el-table-column label="操作" fixed="right" align="center" width="180">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="tableShow(scope.row, scope.$index)">
                                查看
                            </el-button>
                            <#if genEdit>
                            <el-button v-auth="'${module}:${business}:edit'" text type="primary" size="small" @click="tableEdit(scope.row, scope.$index)">
                                编辑
                            </el-button>
                            </#if>
                            <#if genRemove>
                            <el-popconfirm title="确定删除吗？" @confirm="tableDel(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button v-auth="'${module}:${business}:remove'" text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                            </#if>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>

    <save-dialog v-if="dialog.save" ref="saveDialog" @success="refreshTable" @closed="dialog.save=false"></save-dialog>

</template>

<script>
    import saveDialog from './save.vue'

    export default {
        name: '${business}',
        components: {
            saveDialog
        },
        data() {
            return {
                dialog: {
                    save: false
                },
                <#if genRemove>
                selection: [],
                </#if>
                search: {
                    <#list fieldList as field>
                    <#if field.pageTableQuery>
                    ${field.javaField}: null<#if field_index != fieldList?size - 1>,</#if>
                    </#if>
                    </#list>
                },
                dataList: <#if genPageTableType == '1'>this.$API.${module}.${business}.page<#else>this.$API.${module}.${business}.list</#if>
            }
        },
        methods: {
            <#if genAdd>
            // 添加
            add() {
                this.dialog.save = true;
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('add');
                })
            },
            </#if>
            <#if genRemove>
            // 批量删除
            batchDel() {
                this.$confirm(`确定删除选中的` + this.selection.length + `项数据吗？`, '提示', {
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading();
                    const idList = [];
                    this.selection.forEach(e => idList.push(<#list fieldList as field><#if field.columnPk>e.${field.javaField}</#if></#list>));
                    const reqData = {idList: idList};
                    this.$API.${module}.${business}.remove.delete(reqData).then(() => {
                        this.$refs.table.refresh();
                        this.$message.success("删除成功");
                    })
                    loading.close();
                })
            },
            </#if>
            // 查看
            tableShow(row) {
                this.dialog.save = true;
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('show').setData(row);
                })
            },
            <#if genEdit>
            // 编辑
            tableEdit(row) {
                this.dialog.save = true;
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row);
                })
            },
            </#if>
            <#if genRemove>
            // 删除
            tableDel(row) {
                const reqData = {idList: [<#list fieldList as field><#if field.columnPk>row.${field.javaField}</#if></#list>]};
                this.$API.${module}.${business}.remove.delete(reqData).then(() => {
                    this.$refs.table.refresh();
                    this.$message.success("删除成功");
                })
            },
            </#if>
            // 搜索
            upSearch() {
                this.$refs.table.upData(this.search);
            },
            // 重置
            resetSearch() {
                <#list fieldList as field>
                <#if field.pageTableQuery>
                this.search.${field.javaField} = null;
                </#if>
                </#list>
                this.$refs.table.upData(this.search);
            },
            <#if genRemove>
            // 表格选择后回调事件
            selectionChange(selection) {
                this.selection = selection;
            },
            </#if>
            // 列表刷新
            refreshTable() {
                this.$refs.table.refresh();
            }
        }
    }
</script>

<style>
</style>
